<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品页面</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/css.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/product.css">
    <link rel="stylesheet" href="/css/footer.css">
    <script src="/js/hullabaloo.js"></script>
    <script src="/js/axios.min.js" type="text/javascript"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/jquery.js"></script>
    <script type="text/javascript">
        $.hulla = new hullabaloo();
    </script>
    <style>
        #child{
            width: 50px;
            height: 50px;
        }
        #childDiv{
            position: absolute;
            margin-top: 600px;
            margin-left: 260px;
        }
        .ImgbColor{
            border: 2px solid black;
        }
        #product .ProNameActive{
            border: 1px solid orangered;
            color: orangered;
        }
        #edition .ProTypeActive{
            border: 1px solid orangered;
            color: orangered;
        }
        #colour .ProColorActive{
            border: 1px solid orangered;
            color: orangered;
        }
        .block{
            display: block;
        }
        .none{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <!-- 头部导航栏 -->
            <div class="header">
                <div class="wrap">
                    <ul class="header-left">
                        <li><a href="#">小米商城</a><span>|</span></li>
                        <li><a href="#">MIUI</a><span>|</span></li>
                        <li><a href="#">loT</a><span>|</span></li>
                        <li><a href="#">云服务</a><span>|</span></li>
                        <li><a href="#">天星数科</a><span>|</span></li>
                        <li><a href="#">有品</a><span>|</span></li>
                        <li><a href="#">小爱开放平台</a><span>|</span></li>
                        <li><a href="#">企业团购</a><span>|</span></li>
                        <li><a href="#">资质证照</a><span>|</span></li>
                        <li><a href="#">协议规则</a><span>|</span></li>
                        <li>
                            <a href="#">下载app</a><span>|</span>
                            <div class="download">
                                <a href="#">
                                    <img src="/img/Download.jpg"  alt="">
                                    <p>小米商城app</p>
                                </a>
                            </div>
                            <div class="triangle"></div>
                        </li>
                        <li><a href="#">智能生活</a><span>|</span></li>
                        <li><a href="#">Select Location</a></li>
                    </ul>
                    <ul class="header-right">
                        <li id="Login-li"><a href="Login.html">登录</a><span>|</span></li>
                        <li id="Rigist-li"><a href="Login.html">注册</a><span>|</span></li>
                        <li id="account-li" >
                            <a id="account">{{account}}</a>
                            <span>|</span>
                            <div id="pesondiv">
                                <ul id="pesonul">
                                    <li onclick="mypersonalcenter()">个人中心</li>
                                    <li onclick="evaluateorder()">评价订单</li>
                                    <li onclick="mypersonalcenter()">我的喜欢</li>
                                    <li onclick="location.href=('AccountManagement.html')">小米账户</li>
                                    <li onclick="location.href=('Login.html')">退出登录</li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="Login.html">我的订单</a><span>|</span></li>
                        <li><a href="#">消息通知</a></li>
                        <li class="cart">
                            <a href="#">购物车</a>
                            <div class="cart-list">
                                哦！购物车是空的！
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 头部下拉商品 -->
            <div class="nav">
                <div class="wrap">
                    <div class="logo">
                        <a href="#">
                            <img src="/img/Login/Login.jpg"  onclick="Home()" style="width: 75px;" />
                        </a>
                    </div>
                    <div class="nav-bar">
                        <ul>
                            <li><a href="#">Xiaomi手机</a>
                                <div class="nav-bar-list">
                                    <div class="wrap">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Xiaomi/1.jpg" alt="">
                                                    </div>
                                                    <p>Xiaomi Civi 1s</p>
                                                    <p>2299元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Xiaomi/2.jpg" alt="">
                                                    </div>
                                                    <p>Xiaomi 12 Pro</p>
                                                    <p>4199元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Xiaomi/3.jpg" alt="">
                                                    </div>
                                                    <p>Xiaomi12</p>
                                                    <p>3199元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Xiaomi/4.jpg" alt="">
                                                    </div>
                                                    <p>Xiaomi 12X</p>
                                                    <p>2399元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Xiaomi/5.jpg" alt="">
                                                    </div>
                                                    <p>Xiaomi 11青春活力板</p>
                                                    <p>1799元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Xiaomi/6.jpg" alt="">
                                                    </div>
                                                    <p>Xiaomi Civi</p>
                                                    <p>2299元起</p>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">Redmi红米</a>
                                <div class="nav-bar-list">
                                    <div class="wrap">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Redmi/1.jpg" alt="">
                                                    </div>
                                                    <p>Redmin Note 11Pro+</p>
                                                    <p>1999元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Redmi/2.jpg" alt="">
                                                    </div>
                                                    <p>Redmin Note 11Pro</p>
                                                    <p>1699元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Redmi/3.jpg" alt="">
                                                    </div>
                                                    <p>Redmin Note 11SE</p>
                                                    <p>999起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Redmi/4.jpg" alt="">
                                                    </div>
                                                    <p>Redmin 10A</p>
                                                    <p>699元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Redmi/5.jpg" alt="">
                                                    </div>
                                                    <p>Redemin K50 Pro</p>
                                                    <p>2699起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Redmi/6.jpg" alt="">
                                                    </div>
                                                    <p>Redemin K50</p>
                                                    <p>2199元起</p>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">电视</a>
                                <div class="nav-bar-list">
                                    <div class="wrap">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/TV/1.jpg" alt="">
                                                    </div>
                                                    <p>Redmi智能电视X55 2022</p>
                                                    <p>2399元</p>
                                                </a>
                                            </li>
                                            
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/TV/2.jpg" alt="">
                                                    </div>
                                                    <p>Redmi智能电视X65 2022</p>
                                                    <p>3099元</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/TV/3.jpg" alt="">
                                                    </div>
                                                    <p>小米电视6 65° OLED</p>
                                                    <p>6699元</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/TV/4.jpg" alt="">
                                                    </div>
                                                    <p>小米电视 大师 77° OLED</p>
                                                    <p>17999元</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/TV/5.jpg" alt="">
                                                    </div>
                                                    <p>小米透明电视</p>
                                                    <p>49999元</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/TV/6.jpg" alt="">
                                                    </div>
                                                    <p>小米电视 大师 65英寸OLED</p>
                                                    <p>8999元</p>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">笔记本</a>
                                <div class="nav-bar-list">
                                    <div class="wrap">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/NoteBook/1.jpg" alt="" width="160px" height="110px" />
                                                    </div>
                                                    <p>RedmiBook Pro 14 2022 锐龙版</p>
                                                    <p>5299元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/NoteBook/2.jpg" alt="" width="160px" height="110px" />
                                                    </div>
                                                    <p>RedmiBook Pro 15 2022 锐龙版</p>
                                                    <p>5499元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/NoteBook/3.jpg" alt="" width="160px" height="110px" />
                                                    </div>
                                                    <p>RedmiBook Pro 14  锐龙版</p>
                                                    <p>4699元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/NoteBook/4.jpg" alt="" width="160px" height="110px" />
                                                    </div>
                                                    <p>Redmi Book Pro 14  2022</p>
                                                    <p>5399元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/NoteBook/5.jpg" alt="" width="160px" height="110px" />
                                                    </div>
                                                    <p>小米笔记本 Pro 14 锐龙版</p>
                                                    <p>5499元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/NoteBook/6.jpg" alt="" width="160px" height="110px" />
                                                    </div>
                                                    <p>Redmi G 2021 AMD版</p>
                                                    <p>6499元起</p>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">平板</a>
                                <div class="nav-bar-list">
                                    <div class="wrap">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Flat/1.jpg" alt="">
                                                    </div>
                                                    <p>小米平板5</p>
                                                    <p>1999元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Flat/2.jpg" alt="">
                                                    </div>
                                                    <p>小米平板5 Pro 5G</p>
                                                    <p>3499元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Flat/3.jpg" alt="">
                                                    </div>
                                                    <p>小米平板5 Pro</p>
                                                    <p>2499元起</p>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">家电</a>
                                <div class="nav-bar-list">
                                    <div class="wrap">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/HouseHold/1.jpg" alt="">
                                                    </div>
                                                    <p>巨省电  米家空调 1.5匹 新1级能效 睡眠版</p>
                                                    <p>2199元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/HouseHold/2.jpg" alt="">
                                                    </div>
                                                    <p>巨省电 3匹变频新一级能效（鎏金款）</p>
                                                    <p>5299元起</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/HouseHold/3.jpg" alt="">
                                                    </div>
                                                    <p>米家扫拖机器人 1T</p>
                                                    <p>1299元起</p>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">路由器</a>
                                <div class="nav-bar-list">
                                    <div class="wrap">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Router/1.jpg" alt="">
                                                    </div>
                                                    <p>Redmi电竞路由AX5400</p>
                                                    <p>599元</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Router/2.jpg" alt="">
                                                    </div>
                                                    <p>小米路由AX6000</p>
                                                    <p>549元</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Router/3.jpg" alt="">
                                                    </div>
                                                    <p>小米路由AX9000</p>
                                                    <p>1299元</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Router/4.jpg" alt="">
                                                    </div>
                                                    <p>Redmi路由AC2100</p>
                                                    <p>199元</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <div class="nav-img-box">
                                                        <img src="/img/nav/Router/5.jpg" alt="">
                                                    </div>
                                                    <p>小米路由器4A 千兆版</p>
                                                    <p>129元</p>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">服务中心</a></li>
                            <li><a href="#">社区</a></li>
                        </ul>
                    </div>
                    <div class="search">
                        <input type="text" id="select" placeholder="Redmi Note 11T Pro系列" value="Redmi Note 11T Pro系列">
                        <button type="button" @click="search()">搜索</button>
                        <div class="search-list">
                            <a href="#">手机</a>
                            <a href="#">电脑</a>
                            <a href="#">笔记本 平板</a>
                            <a href="#">小米手环7 NFC版</a>
                            <a href="#">小爱音箱 Pro</a>
                            <a href="#">立式空调</a>
                            <a href="#">K歌麦克风</a>
                            <a href="#">米家跑步机</a>
                        </div>
                    </div>
                </div>
            </div>
            <hr style="color: #B0B0B0;" />
            <!-- 产品图片 -->
            <div class="product" style="text-align: center;">
                <p id="ty-name">{{product.productName}}</p>
                <div class="WaresDiv">
                    <!-- <img class="WaresImg" :src="p.waresPricture.split(',')[0]" id="ty-img"> -->
                    <img class="WaresImg" :src="hImg" id="ty-img">
                    <div id="childDiv" class="WaresDiv" >
                        <img id="child"
                             v-for="img in product.productPictureList.split(',')" 
                             :src="img" 
                             @mouseover="imgover($event)" @mouseout="imgout($event)" 
                        />
                    </div>
                </div>
                <div class="product-news">
                    <input type="hidden" :value="product.productID" />
                    <p id="ty-Name">{{product.productName}}</p>
                    <p id="ty-Introduce">{{product.productDescribe}}</p>
                    <p id="ty-Business">小米自营</p>
                    <p id="ty-Price">{{product.productDetailPrice}}元</p>
                </div>
            </div>
            <!-- 产品信息 -->
            <div>
                <hr id="hr" />
                <div class="edition-sort">
                    <p id="edition-title">选择版本</p>
                    <ul id="edition">
                        <li
                            v-for="(item,index) in memory" 
                            v-on:click="ProTypeClickItem(item)" :class="ProTypeColor(item)"
                            @click = "ProTypeClickFun($event)"
                        >{{item}}</li>
                    </ul>
                </div>
                <div class="colour-sort">
                    <p id="colour-title">选择颜色</p>
                    <ul id="colour">
                        <li
                            v-for="(item,index) in color"
                            v-on:click="ProColorClickItem(item)" :class="ProColorColor(item)"
                            @click = "ProColorClickFun($event)"
                        >{{item}}</li>
                    </ul>
                </div>
                <div class="settlement" style="background-color: #F9F9FA;">
                    <input type="hidden" id="proID" :value="product.productID" />
                    <p class="product-p">版本：</p><input type="text" id="edition-textbox" size = "30" :value="ProTypeText" readonly="readonly" name="edition" />
                    <br>
                    <p class="product-p">颜色：</p><input type="text" id="colour-textbox" size = "30" :value="ProColorText" readonly="readonly" name="colour" />
                    <p id="settlement-Subtotal">{{product.productPrice}}元</p>
                    <p id="settlement-lable">总计：</p><p id="settlement-price">{{product.productPrice}}元</p>
                    <!-- <input type="button" id="purchase" value="购买" onclick="location.href=('PersonalCenter.html')"  /> -->
                    <input type="button" id="purchase" value="购买"  @click="TextClick()" />
                    <img src="/img/未喜欢.png"  id="wlove" />
                    <input type="button" id="SCart" value="加入购物车"@click="addCart()"/>
                </div>
            </div>
            <!-- 结尾 -->
            <div class="footer" style="margin-top: 80px;">
                <div class="container">
                    <div class="footer-serves">
                        <ul>
                            <li><a href="#"><img src="/img/Foot/1.jpg" alt="">&nbsp;<span>预约维修服务</span></a></li>
                            <li><a href="#"><img src="/img/Foot/2.jpg" alt="">&nbsp;<span>7天无理由退货</span></a></li>
                            <li><a href="#"><img src="/img/Foot/3.jpg" alt="">&nbsp;<span>15天免费换货</span></a></li>
                            <li><a href="#"><img src="/img/Foot/4.jpg" alt="">&nbsp;<span>满69元包邮</span></a></li>
                            <li><a href="#"><img src="/img/Foot/5.jpg" alt="">&nbsp;<span>1100余家售后网点</span></a></li>
                        </ul>
                    </div>
                    <div class="footer-links">
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <ul>
                            <li>选购指南</li>
                            <li><a href="#">手机</a></li>
                            <li><a href="#">电视</a></li>
                            <li><a href="#">笔记本</a></li>
                            <li><a href="#">平板</a></li>
                            <li><a href="#">穿戴</a></li>
                            <li><a href="#">耳机</a></li>
                            <li><a href="#">家电</a></li>
                            <li><a href="#">家电</a></li>
                            <li><a href="#">路由器</a></li>
                            <li><a href="#">音箱</a></li>
                            <li><a href="#">配件</a></li>
                        </ul>
                        <ul>
                            <li>服务中心</li>
                            <li><a href="#">申请售后</a></li>
                            <li><a href="#">售后政策</a></li>
                            <li><a href="#">维修服务价格</a></li>
                            <li><a href="#">订单查询</a></li>
                            <li><a href="#">以旧换新</a></li>
                            <li><a href="#">保障服务</a></li>
                            <li><a href="#">防伪查询</a></li>
                            <li><a href="#">F码通道</a></li>
                        </ul>
                        <ul>
                            <li>线下门店</li>
                            <li><a href="#">小米之家</a></li>
                            <li><a href="#">服务网点</a></li>
                            <li><a href="#">授权体验店/专区</a></li>
                        </ul>
                        <ul>
                            <li>关于小米</li>
                            <li><a href="#">了解小米</a></li>
                            <li><a href="#">加入小米</a></li>
                            <li><a href="#">投资者关系</a></li>
                            <li><a href="#">企业社会责任</a></li>
                            <li><a href="#">廉洁举报</a></li>
                        </ul>
                        <ul>
                            <li>关注我们</li>
                            <li><a href="#">新浪微博</a></li>
                            <li><a href="#">官方微信</a></li>
                            <li><a href="#">联系我们</a></li>
                            <li><a href="#">公益基金会</a></li>
                        </ul>
                        <div class="col-contact">
                            <p class="phone">400-100-5678</p>
                            <p>8:00-18:00（仅收市话费）</p>
                            <a rel="nofollow" class="btn btn-line-primary btn-small J_contactBtn" > <em class="iconfont-message2"></em> 人工客服 </a>
                            <div class="follow">关注小米：<a href="https://weibo.com/xiaomishangcheng" class="wb" target="_blank" ></a><a class="wx" ><img
                                    src="/img/Foot/1010.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/userscommon.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",  
            data:{
                account:0,
                productID:0,
                productDetailID:0,
                product:{},
                color:[],
                memory:[],
                hImg:null,//动态显示产品图片
                acolor : true,//是否展示颜色
                ProTypeCurrentIndex : -1,//产品版本
                ProColorCurrentIndex : -1,//产品颜色
                ProTypeText:null,//产品版本
                ProColorText:null,//产品颜色
                account :null,
                OrderModel:{
                    orderID:0,
                    userAccount:0,
                    orderMode:"支付宝",
                    state:1,
                    productDetailID:0,
                    productDetailAmount:1,
                    productDetailPrice:0,
                }
            },
            created: function () {
                // 获取跳转页面的url数据
                //首页传送的指定商品id从而获取对应商品信息
                var url = window.location.href
                var path = url.split('?')[1]
                var field = new URLSearchParams('?'+path)
                var proID = field.get('proID')
                var account = field.get('account')
                this.account = account
                this.OrderModel.userAccount = account
                //传回id
                this.WaresAll(proID)
                this.GetUserID(account)
            },
            methods: {
                //产品信息
                WaresAll: function (proID) {
                    axios.get('/product/info',{ params: { pid: proID} }).then(function (resp) {
                        var data = resp.data.data;
                        vm.product = data.product
                        vm.color = data.color
                        vm.memory = data.memory
                        vm.productID=proID
                        vm.hImg = data.product.productPictureList.split(',')[0]
                    })
                },
                //动态数据样式鼠标放置时
                imgover(e){
                    var er = e.currentTarget.src
                    var a = er.indexOf("/img");
                    var b = er.substr(a)
                    vm.hImg = b
                    e.currentTarget.className = 'ImgbColor';
                },
                //动态数据样式鼠标移出时
                imgout(e){
                    e.currentTarget.className = '';
                },
                //产品版本
                ProTypeClickItem : function (item) {//行点击事件
                    axios.get('/product/info',{ params: { pid : vm.productID, memory : item} }).then(function (resp) {
                        var data=resp.data.data
                        vm.product = data.product
                        vm.color= data.color
                        vm.ProTypeCurrentIndex = item;
                        vm.productDetailID=data.product.productDetailID
                        vm.OrderModel.productDetailID=data.product.productDetailID
                    })
                },
                ProTypeColor : function (item){//颜色改变事件
                    if(this.ProTypeCurrentIndex == item) {
                        return {ProTypeActive : this.acolor}
                    }
                },
                ProTypeClickFun(e){
                    var text = e.currentTarget.innerHTML
                    vm.ProTypeText = text;
                },
                //产品颜色
                ProColorClickItem : function (item) {//行点击事件
                    axios.get('/product/detail',{ params:{pid:vm.productID, memory:vm.ProTypeText, color:item } })
                    .then(function(resp){
                        var data = resp.data.data;
                        vm.product.productPrice=data.productDetailPrice
                        vm.OrderModel.productDetailPrice = data.productDetailPrice
                        vm.productDetailID=data.productDetailID
                        vm.OrderModel.productDetailID=data.productDetailID
                    })
                    this.ProColorCurrentIndex = item;
                },
                ProColorColor : function (item){//颜色改变事件
                    if(this.ProColorCurrentIndex == item) {
                        return {ProColorActive : this.acolor}
                    }
                },
                ProColorClickFun(e){
                    var text = e.currentTarget.innerHTML
                    vm.ProColorText = text;
                },
                // 点击跳转订单页面
                TextClick(){
                    if(vm.account="null"){
                        if(confirm('请登录再购买!是否跳转登录界面?')){
                            location.href=('Login.html')
                        }
                    }
                    else{
                        vm.getDate();
                        axios({
                            url:'/order/insert',
                            method:'POST',
                            config:{ Headers:{'Content-Type':'application/json'} },
                            data:JSON.stringify(vm.OrderModel)
                        }).then(function (resp) {
                            if (true == resp.data.data) {
                                alert("订单创建成功")
                                window.location.href=
                                    "ConfirmOrder.html?account="+vm.OrderModel.userAccount+"&orderID="+vm.OrderModel.orderID;
                            }else{
                                alert("订单创建失败")
                            }
                        })
                    }
                },
                getDate(){
                    let date = new Date();
                    let a  = parseInt(date.getTime() / 1000);
                    this.OrderModel.orderID = a;
                },
                // 加入购物车
                addCart:function(){
                    if(vm.ProColorText == null || vm.ProTypeText == null){
                        alert("必须先选商品才能加入购物车")
                    }
                    else{
                        var productName = vm.product.productName
                        axios.get('/cart/add',{params:{detailID:vm.productDetailID, productName:productName, userID:vm.account}}).
                        then(function(resp){
                            console.log(resp)
                            $.hulla.send(resp.data.message, 'dark')
                            window.location.href=
                                        "shopCart.html?account="+vm.account;
                        })
                    }
                },
                //读取登录用户信息
                GetUserID : function(account){
                    this.account = account
                    if(this.account == null || this.account == 0){
                        var login =  document.getElementById("Login-li")
                        var rigist = document.getElementById("Rigist-li")
                        login.className="block"
                        rigist.className="block"
                        var account = document.getElementById("account-li")
                        account.className="none"
                    }else{
                        var login =  document.getElementById("Login-li")
                        var rigist = document.getElementById("Rigist-li")
                        login.className="none"
                        rigist.className="none"
                        var account = document.getElementById("account-li")
                        account.className="block"
                    }
                },
                // 搜索框
                search:function(){
                    var name = document.getElementById("select").value;
                    location.href ="WaresSearch.html?name="+name+"&account="+vm.account;
                }
            }
        });
    </script>
    <script src="/js/product.js"></script>
    <script src="/js/account.js"></script>
</body>
</html>